<template>
  <div :class="'header header__'+type" style="height:100%;">
    <div class="logo">
      <img src="sihua.png" alt="思华科技" />
    </div>
    <div class="menu-list" style="margin-right: auto;">
      <ul>
        <li v-for="(item,index) in items" :class="currentItem===item?'hactive':''" :key="item.name">
          <a @click="trigg(index+1,item)">{{ item.label }}</a>
        </li>
      </ul>
    </div>
    <div class="user_nav">
      <ul>
        <li>
          <a href="javascript:void(0)">帮助文档</a>
        </li>
        <li>
          <a href="javascript:void(0)">任务消息</a>
        </li>
      </ul>
      <el-dropdown :hide-on-click="false" @visible-change="visibleChange" placement="bottom-start">
        <span class="el-dropdown-link">
          {{ currentUser }}
          <i :class="visiable ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
        </span>
        <el-dropdown-menu slot="dropdown" :class="'dropdown__'+type">
          <el-dropdown-item icon="el-icon-user">个人信息</el-dropdown-item>
          <el-dropdown-item icon="el-icon-switch-button">注销</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
export default {
  name: "hHeader",
  data() {
    return {
      visiable: false,
      visiable_theme: false,
      type: "blackishgreen",
      items: [
        { name: "screen", label: "慧眼屏" },
        { name: "device", label: "设备配置" }
      ],
      currentItem: null
    };
  },
  props: {
    height: {
      type: Number,
      default: 45
    },
    currentUser: {
      type: String,
      default: ""
    },
    index: {
      type: Number,
      default: 0
    }
  },
  created() {
    this.currentItem = this.items[this.index];
  },
  methods: {
    visibleChange(bool) {
      this.visiable = bool;
    },
    trigg(ty, item) {
      this.currentItem = item;
      this.$router.push({ path: item.name });
    }
  }
};
</script>

<style lang="less" >
.header {
  .menu-list {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 100%;

    ul {
      display: flex;
      flex-direction: row;
      padding: 0 300px;
      width: 200px;
      height: 100%;
      align-items: center;
      justify-content: space-around;

      li {
        height: 100%;
        display: flex;
        align-items: center;
        position: relative;

        &.hactive::after {
          position: absolute;
          content: "";
          background: rgba(255, 120, 0, 1);
          height: 5px;
          width: 100%;
          bottom: 0;
        }
      }

      a {
        text-decoration: none;
        color: #fff;
        cursor: pointer;
      }
    }
  }
  &.header__dynamicgreen {
    background: linear-gradient(to left, #8cc63f, #43b852) !important;
  }

  &.header__primary {
    background: rgba(30, 159, 255, 1) !important;
  }

  &.header__vigourorange {
    background: linear-gradient(
      to left,
      rgba(255, 140, 0, 1),
      rgba(255, 87, 34, 1)
    ) !important;
  }

  &.header__blackishgreen {
    background: linear-gradient(
      to left,
      rgba(82, 183, 109, 1),
      rgba(1, 170, 237, 1)
    ) !important;
  }

  padding: 0 7px;
  display: flex;
  flex-direction: row;
  align-items: center;
  color: #fff;

  .logo {
    font-size: 23px;
    display: flex;
    align-items: center;
  }

  .theme {
    margin-left: 20px;
  }

  .user_nav {
    display: flex;
    ul {
      display: flex;
      padding: 0 20px;
      li {
        padding: 0 20px;

        a {
          text-decoration: none;
          color: #fff;
          font-size: 14px;
        }
      }
    }
  }

  .user_nav,
  .theme {
    .el-dropdown-link {
      cursor: pointer;
      color: #fff;
    }
    .el-icon-arrow-down,
    .el-icon-arrow-up {
      font-size: 12px;
    }
    .demonstration {
      display: block;
      color: #8492a6;
      font-size: 14px;
      margin-bottom: 20px;
    }
  }
}

.dropdown__dynamicgreen {
  .el-dropdown-menu__item:hover,
  .el-dropdown-menu__item:focus,
  .el-dropdown-menu__item.is-active {
    background-color: rgba(95, 184, 120, 0.2);
    color: rgba(95, 184, 120, 1);
  }
}

.dropdown__primary {
  .el-dropdown-menu__item:hover,
  .el-dropdown-menu__item:focus,
  .el-dropdown-menu__item.is-active {
    background-color: rgba(30, 159, 255, 0.2);
    color: rgba(30, 159, 255, 1);
  }
}

.dropdown__vigourorange {
  .el-dropdown-menu__item:hover,
  .el-dropdown-menu__item:focus,
  .el-dropdown-menu__item.is-active {
    background-color: rgba(255, 140, 0, 0.2);
    color: rgba(255, 140, 0, 1);
  }
}

.dropdown__blackishgreen {
  .el-dropdown-menu__item:hover,
  .el-dropdown-menu__item:focus,
  .el-dropdown-menu__item.is-active {
    background-color: rgba(0, 150, 136, 0.2);
    color: rgba(0, 150, 136, 1);
  }
}
</style>